<template>
  <div id="VIEW">
    <div class="Top">
      <h1>数据可视化展览</h1>
    </div>
    <div class="Down">
      <div class="Left">
        <h1>仓库容量分布图</h1>
        <div id="echars1" ref="echars1"></div>
      </div>
      <div class="Right">
        <h1>货物数量分布图</h1>
        <div id="echars2" ref="echars2"></div>
      </div>
    </div>
  </div>
</template>
  
  <script>

export default {
  data () {
    return {
      chartPie: '',
      chartPie2: '',
      // 后台请求到的数据
      ViewTable: [],
      ViewTable2: [],
      // 图表1所需数据
      chart: [],
      // 图表2所需数据
      xData: [],
      yData: []
    }
  },
  created () {
    this.myDingdan()
    this.myKucun()
  },
  mounted () {
    this.drawChart()
    this.drawChart2()
  },
  methods: {
    // 初始化图表1
    drawChart () {
      this.chartPie = this.$echarts.init(this.$refs.echars1)
      this.chartPie.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: '容量占比',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            data: [],
            // roseType: 'radius',
            length: 180,
            //设置饼状图扇形区域的样式
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }
        ]
      })
    },
    // 请求订单数据
    myDingdan () {
      const that = this
      this.$http({
        method: 'GET',
        url: '/lk/lk/dingdan',
      }).then(function (response) {
        that.ViewTable = response.data.data
        // console.log(that.ViewTable);
        // 初始化数据
        for (let i = 0; i < that.ViewTable.length; i++) {
          // const obj = new Object()
          // obj.name = that.ViewTable[i].name
          // obj.value = that.ViewTable[i].num
          // that.chart[i] = obj
        }
        // console.log(that.chart);
        that.chartPie.setOption({
          series: [{
            data: that.chart
          }]
        })
      })
    },


    // 初始化图表2
    drawChart2 () {
      this.chartPie2 = this.$echarts.init(this.$refs.echars2)
      this.chartPie2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true, // x轴文字配置
              interval: 0 //x轴文字显示全
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '库存数量',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      })
    },
    // 请求数据2
    myKucun () {
      const that = this
      this.$http({
        method: 'GET',
        url: '/lk/lk/storeAll'
      }).then(function (response) {
        that.ViewTable2 = response.data.data
        console.log(that.ViewTable2);
        for (let i = 0; i < that.ViewTable2.length; i++) {
          that.xData[i] = that.ViewTable2[i].name
          that.yData[i] = that.ViewTable2[i].number

          const obj = new Object()
          obj.name = that.ViewTable2[i].name
          obj.value = that.ViewTable2[i].number
          that.chart[i] = obj
        }
        console.log(that.xData, that.yData);
        that.chartPie2.setOption({
          xAxis: [{
            data: that.xData
          }],
          series: [{
            data: that.yData
          }]
        })
        that.chartPie.setOption({
          series: [{
            data: that.chart
          }]
        })
      })
    }
  }
}
  </script>
  
<style lang="less" scoped>
#VIEW {
  width: 100%;
  height: 100%;
  background-color: pink;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
  .Top {
    width: 100%;
    height: 10%;
    background-color: aqua;
    h1 {
      text-align: center;
      line-height: 100%;
      font-size: 28px;
    }
  }
  .Down {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    background-color: aquamarine;
    .Left {
      width: 50%;
      height: 100%;
      background-color: rgb(137, 220, 243);
      h1 {
        display: block;
        text-align: center;
        height: 3.6%;
      }
      #echars1 {
        width: 100%;
        height: 90%;
        background-color: aqua;
      }
    }
    .Right {
      width: 50%;
      height: 100%;
      border-left: 1px solid rgb(108, 203, 229);
      background-color: rgb(137, 220, 243);
      h1 {
        display: block;
        text-align: center;
        height: 3.6%;
      }
      #echars2 {
        width: 100%;
        height: 90%;
        background-color: aqua;
      }
    }
  }
}
</style>